<template>
  <base-panel-sm class="home-alarm-recods" title="报警信息记录">
    <div class="alarm-container">
      <div class="alarm" v-for="item in alarm" :key="item.id">
        <span>{{ item.title }}</span>
        <span>{{ item.text }}</span>
      </div>
    </div>
  </base-panel-sm>
</template>

<script>
import BasePanelSm from './BasePanelSm.vue';

export default {
  components: {
    BasePanelSm,
  },

  data() {
    return {
      alarm: [
        { id: 1, title: '教学楼 2-302 发生异常', text: '2020/8/27 13:00' },
        { id: 2, title: '教学楼 2-302 发生异常', text: '2020/8/27 13:00' },
        { id: 3, title: '教学楼 2-302 发生异常', text: '2020/8/27 13:00' },
        { id: 4, title: '教学楼 2-302 发生异常', text: '2020/8/27 13:00' },
        { id: 5, title: '教学楼 2-302 发生异常', text: '2020/8/27 13:00' },
        { id: 6, title: '教学楼 2-302 发生异常', text: '2020/8/27 13:00' },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.home-alarm-recods {
  height: auto;
  // height: 14.204vh;
  margin-bottom: 1.204vh;
}

.alarm-container {
  margin-top: .2vh;
  padding-bottom: .5vh;
  overflow: auto;
  height: 9vh;
  position: relative;
  z-index: 10;
  width: 95%;
  // top: -.3vh;
}

.alarm {
  display: flex;
  justify-content: space-between;
  line-height: 1;
  font-size: .781vw;
  margin-bottom: 1.296vh;
  padding-left: 2.708vw;
  padding-right: 2.865vw;
  color: rgba(255,255,255,.8);
}

.alarm-container::-webkit-scrollbar {
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.alarm-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}

.alarm-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
